<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script>
    /*
    * 函数的
    *   this：这个函数的调用主体，谁调用执行了这个函数，与它在哪里执行没有关系
    *
    *   函数执行，是谁在执行？
    *
    *   1.所有的函数都有自己的调用主体，如果找不到调用主体，它的调用主体就是window
    *   2.对象.函数(执行) this就是指向这个对象
    *
    *   window：浏览器对象
    *
    *   DOM: document
    *
    *   BOM: window(全局对象，任何地方都可以通过window访问)
    *
    *   ES
    *
    *
    *
    * */

    /*function foo(){
       console.log(this === window) //true 所以这个函数的调用主体对象是window
    }

    foo() //浏览器调用了这个函数*/

    /*let obj = {
        fn:function (){
            console.log(this)
        }
    } //怎么调用这个对象里面的函数

    obj.fn() //obj是对象 fn是属性名 function是属性的值 obj.fn就是这个函数 所以obj.fn()就是这个函数执行 类似于console.log()
             //问题来了，这时候是谁调用了这个函数？ 此时是这个对象调用了这个函数 会打印这个对象 {fn:f} */

    /*
    * this用法：
    * */

    //自我介绍函数
    function sayName(){ //谁调用这个函数，就打印调用者的属性
        console.log(`我是${this.name},我很开心`)
    }

    let per1 = {
        name:"阿飞",
        sayName:sayName //给这个对象添加一个sayName属性，属性值是上面定义的函数
    }



    let per2 = {
        name:"sherry",
        sayName:sayName
    }

    per1.sayName() //让per1这个对象说出他的名字 per1调用这个函数
    per2.sayName()





</script>
</body>
</html>